<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>会员中心</title>
    <link rel="stylesheet" href="/static/astro_explain/css/swiper.min.css">
    <link rel="stylesheet" href="/static/vip2/css/vip_center.css?v=2019.11.14">
    <link rel="stylesheet" href="/static/vip2/css/common.css?v=?v=2019.11.13">
</head>
<body class="body_con">
<!--<div class="nav" style="{$is_all_screen==0?'padding-top:3rem':'padding-top:5rem'}">-->
<div class="nav"
     style="{$app_type=='ios'?($is_all_screen==0?'padding-top:3rem':'padding-top:5rem'):($h_of_android_status_bar==0?'padding-top:3rem':('padding-top:'.(($h_of_android_status_bar+10)/10.0).'rem'))}">
    <div class="title">会员中心</div>
    <div class="right_title" onclick="rulesBtnClick()">升级规则</div>
</div>
<!--顶部背景图片-->
<div class="header_bg">
<!--    <div class="user_con" style="{$is_all_screen == 0 ? 'padding-top:8rem;':'padding-top:11rem;';}">-->
    <div class="user_con" style="{$app_type=='ios'?($is_all_screen==0?'padding-top:8rem':'padding-top:11rem'):($h_of_android_status_bar==0?'padding-top:8rem':('padding-top:'.(7+($h_of_android_status_bar+10)/10.0).'rem'))}">
        <img class="avatar" onerror="onerror=null;src='{$oss}/avatar_default_2.png'" src="{$oss}/{$data.user.avatar}"/>
        <div class="right_con">
            <div class="top_con">
                <div class="name">{$data.user.name}</div>
                {if 1 != $data.user.status}
                <div class="expired_con">
                    <img class="img" src="{$oss}/vip/images/vip_center/vip_expired_level_{$data.user.vip}.png">
                    <div class="title">激活会员</div>
                </div>
                {else/}
                <img class="vip_level_img" src="{$oss}/vip/images/vip_center/vip_level_{$data.user.vip}.png">
                {/if}
            </div>
            <div class="bottom_con">
                <div class="left_con">
                    {if 1 !== $data.user.status}
                    <div class="expired_title">会员已过有效期</div>
                    {else/}
                    {if $apple_status == 1}
                    <div class="expired_title">连续订阅中</div>
                    {/if}
                    <div class="expired_title">会员有效期至{$data.user.vip_end_time}</div>
                    <div class="star_text"><span class="star_value_text">{$data.user.star_num}</span>
                        星力值<span class="star_grow_num_text">&nbsp; {$data.user.grow_num}倍成长中</span>
                    </div>
                    {/if}
                </div>
                <img class="star_rank_img" style="{$data.user.status==1?'margin-top: -1rem;':'margin-top:0.1rem;'}"
                     src="{$oss}/vip/images/vip_center/star_rank_img.png">
            </div>
        </div>
    </div>

    <!--swiper-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--单个card-->
            {foreach $data.vip_star_list as $k => $v}
            <div class="swiper-slide">
                <div class="card_con">
                    <img class="bg_img" src="{$oss}vip/images/vip_center/vip{$k}_bg.png">
                    <div class="content_con">
                        <div class="left_con">
                            <!--当前图标-->
                            {if $k==$data.user.vip}
                            <div class="current_text">当前</div>
                            {/if}

                            <!--会员图标-->
                            <div class="vip_level_con">
                                <img class="level_img" src="{$oss}/vip/images/vip_center/vip_img_{$k}.png">
                                <img class="right_vip_img" src="{$oss}/vip/images/vip_center/vip_tag.png">
                            </div>

                            <div class="need_text">{$k > $data.user.vip? '需要星力值'.$v:'&nbsp'}</div>

                            <!--已达成等级-->
                            {if $k < $data.user.vip}
                            <div class="hints_text">已达成该等级</div>
                            {else\}
                            <div>
                                <!--未达成等级-->
                                {if $k != $data.user.vip}
                                <div class="hints_text">还需要{$data.vip_star_list[$k]-$data.user.star_num}星力值升级v{$k}</div>
                                {/if}
                            </div>
                            {/if}

                            <!--当前等级提示-->
                            {if $k == $data.user.vip }
                            {if $data.user.vip != 8}
                            <div class="hints_text">还需要{$data.vip_star_list[$k+1]-$data.user.star_num}星力值升级v{$k+1}</div>
                            <div class="bottom_con">
                                <div class="progress_con">
                                    <div class="left_progress" id="progress"></div>
                                </div>
                                <div class="value_con">
                                    <div class="text">v{$k}</div>
                                    <div class="text">v{$k+1}</div>
                                </div>
                            </div>
                            {else/}
                            <div class="hints_text">恭喜您，登上巅峰！</div>
                            {/if}
                            {/if}
                        </div>

                        <div class="right_con {$k == 8 ? 'right_con_vip_9':''} {$k>2?'right_con_bigger_3':''}">
                            <img class="medal_img {$k == 8 ? 'medal_img_vip_9':''}" src="{$oss}/vip/images/vip_right/vip{$k}.png">
                            {if $k !=8}
                            <a href="#job" class="btn_con">
                                <img class="icon" src="{$oss}/vip/images/vip_center/vip_img.png">
                                <div class="text">升级攻略</div>
                            </a>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
    </div>
</div>


<!--向上箭头-->
<div class="solid_arrow">
    <img class="img" src="{$oss}/vip/images/vip_center/solid_arrow_img.png">
</div>

<!--权益列表-->
<div class="right_list_con">
    {foreach $data.right_list[$data.user.vip] as $k => $v}
    <div class="item_con {$k==1 ? 'item_con_sencond':''}">
        <div class="top_tag">会员专享</div>
        <div class="bottom_con">
            <div class="left_con">
                <div class="title" id="right_title_{$k}">{$v.title}</div>
                <div class="des" id="right_des_{$k}">{$v.des}</div>
            </div>
            <img class="right_img" src="{$oss}vip/images/vip_center/{$k == 0 ?'right_vip':'right_star_num'}.png">
        </div>
    </div>
    {/foreach}
</div>

<!--礼券部分-->
<!--顶部标题-->
<div class="common_header_con">
    <div class="left_con">
        <img class="img" src="{$oss}/vip/images/vip_center/coupon_img.png">
        <div class="title">VIP小行星等级礼券</div>
    </div>
    <div class="right_con">
        <div class="title" onclick="rightsDetail()">查看详细权益说明</div>
        <div class="arrow"></div>
    </div>
</div>
<!--权益部分-->
<div class="level_coupons_con">
    {foreach $data.coupon_list[$data.user.vip] as $k => $v}
    <div class="item_con">
        <div class="name {$k==3?'name_map':''}">{$v.name}</div>
        <div class="center_con">
            <div class="count">{$v.count}</div>
            <div class="unit">张/月</div>
        </div>
        <div class="circle_con">
            <div class="left circle"></div>
            <div class="line"></div>
            <div class="right circle"></div>
        </div>
        <div class="des">{$v.des}</div>
    </div>
    {/foreach}
</div>

<!--会员升级任务-->
<div id="job" class="job_con">
    <div class="common_header_con h_bg">
        <div class="left_con">
            <img class="img" src="{$oss}/vip/images/job/job_header_icon.png">
            <div class="title">会员升级任务</div>
        </div>
        <div class="right_con" onclick="starNumDetal()">
            <div class="title">成长明细</div>
            <div class="arrow"></div>
        </div>
    </div>
    <div class="bg"></div>

    <div class="coupon_con">
        <div class="top_con">
            <div class="first_con">
                <div class="text">{$data.jobs.current.month}月星力值增长</div>
                <div class="text">超过的用户</div>
            </div>
            <div class="second_con">
                <div class="left_con">
                    <div class="star_num_cur_month">{$data.jobs.current.star_num_cur_month}</div>
                    <div class="star_num_max_month">&nbsp;/ {$data.jobs.current.star_num_max_month}（月获取上限）</div>
                </div>
                <div class="star_num_cur_month">{$data.jobs.current.star_num_override_per}%</div>
            </div>
            {if $data.user.vip !=8}
            <div class="third_text">距离V{$data.user.vip+1}还差{$data.vip_star_list[$data.user.vip+1]-$data.user.star_num}星力值</div>
            {else/}
            <div class="third_text">恭喜您，登上巅峰！</div>
            {/if}
        </div>
        <div class="line"></div>
        <div class="left_circle"></div>
        <div class="right_circle"></div>
        <div class="bottom_con">
            <div class="left_con">
                <div class="text">{$data.user.status ==1?'续费年度会员':'激活小行星会员'}</div>
                <div class="text des">{$data.user.status ==1?'立即获得海量星力值':'立项六大尊贵权益'}</div>
            </div>
            <div class="btn">{$data.user.status==2?'立即激活':'立即续费'}</div>
        </div>
    </div>
    <!--只有会员没有过期的时候，才有任务部分-->
    {if $data.user.status == 1}
    <!--任务标题-->
    <div class="list_header_con">
        <img class="icon" src="{$oss}/vip/images/job/job_header_arrow.png">
        <div class="text">完成以下任务，快速升级</div>
    </div>
    <!--任务列表-->
    <div class="list_con">
        {foreach $data.tasks as $k => $v}
        {if $v.is_show}
        <div class="item_con">
            <div class="left_con">
                <img class="icon" src="{$oss}{$v.icon}">
                <div class="title_con">
                    <div class="name">{$v.name}</div>
                    <div class="des">{$v.des}</div>
                </div>
            </div>
            <div data-index="{$k}" class="btn">去完成</div>
        </div>
        {/if}
        {/foreach}
    </div>
    <div class="bottom_des">更多任务，敬请期待</div>
    {/if}
</div>


</body>

<script src="/static/astro_explain_new/js/jquery-1.11.3.min.js"></script>
<script src="/static/astro_explain/js/swiper.min.js"></script>
<script src="/static/vip2/js/common_statistics.js"></script>
<script>
    var d = '{:json_encode($data)}';
    var data = JSON.parse('{:json_encode($data)}')
    var domain = '{$domain}'
    var app_type = '{$app_type}'
    var version = '{$version}'
    var oss = '{$oss}'
    var is_all_screen = '{$is_all_screen}'

    window.onresize = function () {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px'
    }
    window.onresize();
</script>
<script src="/static/vip2/js/common_func.js?v=20230705"></script>
<script src="/static/vip/js/vip_center.js?v=1.3"></script>
{include file="../apps/web/view/public/sensors.html" /}
</html>
